<template>
  <div style="width: 400px">
    <el-card
      class="box-card"
      style="margin: 12px"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <span>个人信息</span>
      </div>
      <div v-if="flag">
        <ul class="user-info">
          <li>
            <svg-icon name="user"></svg-icon>
            登录账号
            <div class="user-right">
              {{ user.account }}
            </div>
          </li>
          <li>
            <svg-icon name="user"></svg-icon>
            用户昵称
            <div class="user-right">
              {{ user.nickname }}
            </div>
          </li>
          <li>
            <svg-icon name="user"></svg-icon>
            手机号码
            <div class="user-right">
              {{ user.phoneNumber }}
            </div>
          </li>
          <li>
            <svg-icon name="email"></svg-icon>
            用户邮箱
            <div class="user-right">
              {{ user.email }}
            </div>
          </li>
          <li>
            <svg-icon name="email"></svg-icon>
            注册时间
            <div class="user-right">
              {{ user.createdTime }}
            </div>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { SelectListModule } from '@/store/modules/selectList'
import PageTemplate from '@/components/PageTemplate/index.vue'
import { getUserInfo } from '@/api/user.ts'
import { UserInfo } from '@/models/users.d.ts'
import { UserModule } from '@/store/modules/user'

@Component({
  components: {
    PageTemplate
  }
})
export default class Page extends Vue {
  public flag = false
  public title = '用户信息'
  public id!: number
  get user() {
    return UserModule.userInfo
  }

  // async findById() {
  //   try {
  //     // this.dialogPending = true
  //     const resp: any = await getUserInfo()
  //     this.user = resp.data
  //     this.flag = true
  //   } finally {
  //     // this.dialogPending = false
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.rolesPage {
  height: 100%;
  .content {
    height: calc(100% - 40px);
  }
}

.user-info {
  padding-left: 0;
  list-style: none;

  li {
    border-bottom: 1px solid #f0f3f4;
    padding: 11px 0;
    font-size: 13px;
  }

  .user-right {
    float: right;
    a {
      color: #317ef3;
    }
  }
}
</style>
